<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="activityName">
        <el-input
          v-model="list.filter.activityName"
          placeholder="请输入搜索的活动名称"
          clearable
        />
      </el-form-item>
      <el-form-item prop="activityStatus">
        <KiSelect
          v-model="list.filter.activityStatus"
          :options="[
            { dataValue: 1, dataName: '未开始' },
            { dataValue: 2, dataName: '进行中' },
            { dataValue: 3, dataName: '已结束' },
          ]"
          placeholder="活动状态"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item prop="status">
        <Status v-model="list.filter.status" />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <AuthButton @click="c" name="新增" />
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column prop="sort" label="序号" />
      <el-table-column prop="activityName" label="活动名称" />
      <el-table-column prop="typeId" label="生效时段">
        <template slot-scope="scope">
          <span>{{ scope.row.startTime }} - {{ scope.row.endTime }}</span>
          <el-tag style="margin-left: 20px">{{
            getTimeStatus(scope.row.startTime, scope.row.endTime)
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="启用状态" width="80" align="center">
        <template slot-scope="{ row: { id, status } }">
          <KiPopSwitch
            v-bind="popSwitchProps(status)"
            @change="updateStatus({ id, status: status ^ 1 })"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否置顶" width="80" align="center">
        <template slot-scope="{ row: { id, top } }">
          <KiPopSwitch
            v-bind="popSwitchProps(top)"
            @change="updateTop({ id, top: top ^ 1 })"
            active-text="是"
            inactive-text="否"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding">
        <template slot-scope="{ row: rowData }">
          <auth-button @click="u(rowData)" name="编辑" />
          <auth-button @click="d(rowData)" name="删除" />
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :show.sync="form.show"
      :title="formTitle"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
      :loading="form.loading"
    >
      <template #el-form>
        <el-form-item label="活动名称" prop="activityName" verify>
          <el-input
            v-model="form.data.activityName"
            maxlength="30"
            show-word-limit
            placeholder="请填写活动名称"
          />
        </el-form-item>
        <el-form-item label="序号" prop="sort" verify>
          <Sort v-model="form.data.sort" />
        </el-form-item>
        <!-- <el-form-item label="所属地点" prop="activityPlace" verify>
          <RegionSelect v-model="form.data.activityPlace" ref="RegionSelect" />
        </el-form-item> -->
        <el-form-item label="所属地区" prop="tempBelLocal" verify>
          <DestinationSelect
            placeholder="搜索 地区"
            v-model="form.data.tempBelLocal"
            :filter-level="2"
            :filter-type="[0, 1, 2]"
            :filter-null="true"
            :label.sync="form.data.activityPlace"
            :valueData.sync="form.data.activityPlaceCode"
            :typeId.sync="form.data.typeId"
          />
        </el-form-item>
        <el-form-item label="活动封面图" prop="avatar" verify>
          <Imgpond
            v-model="form.data.avatar"
            value-type="string"
            :count="1"
            aspectRatio="1/1"
          />
        </el-form-item>
        <el-form-item label="活动图集" prop="imgList" verify>
          <Imgpond v-model="form.data.imgList" :count="9" aspectRatio="1/1" />
        </el-form-item>
        <el-form-item label="活动时段" prop="startTime" verify>
          <TimeRangePicker
            type="date"
            placeholder="请选择"
            value-format="yyyy-MM-dd"
            :start.sync="form.data.startTime"
            :end.sync="form.data.endTime"
          />
        </el-form-item>
        <el-form-item
          label="详细地址"
          prop="address"
          :verify="{ maxLength: 100 }"
        >
          <div style="display: flex; justify-content: space-between">
            <el-input v-model="form.data.address" style="width: 100%" clearable>
              <el-button slot="append" @click="showCoordPicker = true">
                地图选点
              </el-button>
            </el-input>
            <CoordPicker
              :show.sync="showCoordPicker"
              :lng.sync="form.data.longitude"
              :lat.sync="form.data.latitude"
              :address.sync="form.data.address"
              :city="
                $refs.RegionSelect &&
                $refs.RegionSelect.label &&
                $refs.RegionSelect.label.split('/')[0]
              "
            />
          </div>
        </el-form-item>
        <el-form-item label label-width="0">
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude" verify>
              <el-input v-model="form.data.longitude" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度" prop="latitude" verify>
              <el-input v-model="form.data.latitude" clearable />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="活动介绍" prop="descriptionPlus" verify>
          <MiniMCE
            v-model="form.data.descriptionPlus"
            :disabled="form.status === 'r'"
          />
        </el-form-item>
        <el-form-item label="是否热门" prop="hot" verify>
          <el-switch
            v-model="form.data.hot"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </template>
    </KiFormDialog>
  </div>
</template>

<script>
import pageMixin from "@/utils/pageMixin";
import useAdmateAdapter from "@/utils/useAdmateAdapter";
import DestinationSelect from "@/components/FilterDestinationSelect";
export const ENUM_ACTIVITY_ADDRESS_TYPE = [
  { label: "地区", type: "city", typeId: "1", real: "activityPlaceCode" },
  { label: "区县", type: "country", typeId: "2", real: "activityPlaceCode" },
  { label: "景点", type: "scenic", typeId: "3", real: "scenicId" },
  { label: "场馆", type: "venue", typeId: "4", real: "spaceId" },
];

export default {
  mixins: [pageMixin],
  components: { DestinationSelect },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: "one-travel-api/activity",
      form: {
        data: {
          status: 1,
        },
      },
      list: {
        filter: {
          activityStatus: "",
          startTimeLE: "",
          endTimeLT: "",
          startTimeGT: "",
          endTimeGE: "",
        },
      },
    }),
  data() {
    return {
      nowData: this.$dayjs().format("YYYY-MM-DD"),
      showCoordPicker: false,
      enumList: {
        areaTreeOptions: [],
      },
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  watch: {
    "list.filter.activityStatus": {
      handler() {
        console.log("list.filter.activityStatus", this.list.filter);
        let activityStatus = this.list.filter.activityStatus;
        if (activityStatus == 1) {
          this.list.filter.startTimeGT = this.nowData;

          this.list.filter.startTimeLE =
            this.list.filter.endTimeGE =
            this.list.filter.endTimeLT =
              "";
        }

        if (activityStatus == 2) {
          this.list.filter.startTimeLE = this.list.filter.endTimeGE =
            this.nowData;

          this.list.filter.startTimeGT = this.list.filter.endTimeLT = "";
        }

        if (activityStatus == 3) {
          this.list.filter.endTimeLT = this.nowData;

          this.list.filter.startTimeGT =
            this.list.filter.startTimeLE =
            this.list.filter.endTimeGE =
              "";
        }

        this.getList()
      },
      deep: true,
    },
  },
  filters: {
    getTypeEnum(val) {
      return ENUM_ACTIVITY_ADDRESS_TYPE.find((item) => item.typeId === val)
        .label;
    },
  },
  methods: {
    reset() {
      this.list.filter = {};
    },
    updateTop({ id, top }) {
      this.$POST("one-travel-api/activity/updateTopStatus", {
        id,
        status: top,
      }).then((res) => {
        this.getList();
      });
    },
    getTimeStatus(startTime, endTime) {
      if (startTime > this.nowData) {
        return "未开始";
      }
      if (endTime < this.nowData) {
        return "已结束";
      }
      if (startTime <= this.nowData && endTime >= this.nowData) {
        return "进行中";
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
